<template>
	<view class="" v-if="pageShow">
		<view class="" style="padding-bottom: 250rpx;">
			<!-- 选择场次 -->
			<view class="mainpadding ffffff">
				<!-- 日期 -->
				<view class="flexbetween">
					<view class="ershiba  xiaohei nofonweight" style="color: #1ba95b;" @click="changeMonth('pre')">上一月
					</view>
					<view class="sanshier xiaohei fonweight">{{y+'年'+formatNum(m)+'月'}}</view>
					<view class="ershiba  xiaohei nofonweight" style="color: #1ba95b;" @click="changeMonth('next')">下一月
					</view>
				</view>
				<scroll-view class="scroll-view_H margin_top" scroll-x="true">
					<view class="scroll-view-item_H uni-bg-red " v-for="(item,index) in dateData" :key="index"
						@click="changeday(item)">
						<!-- 已选中 -->
						<view class=" margin_right4" :class="currentdate==item.date?'zitixhx':'weixzx'">
							<view class="ershiba xiaohei nofonweight">
								{{returnmouth(item.week)}}({{item.mouth}}-{{item.day}})
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flexleft" style="align-items: flex-start;">
					<view class="flexcolumn">
						<view class="xiaohei main_size itemleftbox" :class="index==0?'margin_top6':''"
							v-for="(item,index) in lefttimeData" :key="index">{{item}}</view>
					</view>
					<!-- choose_status:0没有信息，1可以选择，2已售，3不可选择，4已选择 -->
					<scroll-view class="margin_top" scroll-x="true" style="width: 90%;">
						<view class="flexleft" style="margin-right: 2rpx;">
							<view class="flexcolumn" v-for="item in cginfo" :key="item.id">
								<view class="xiaohei main_size xiankuan" style="width: 120rpx;">{{item.name}}</view>
								<!-- <view class="itembox flexcenter xiaobai smalltext" :class="ite.choose_status==0?'bghui':ite.choose_status==2?'bgqian':ite.choose_status==4?'bglan':''"
								v-for="(ite,index) in item.cgcgb" :key="index" @click="checkitem(ite)">
									<text  v-if="ite.choose_status!=0">￥{{ite.cgcgbData.price}}</text>
									</view> -->
									<view class="itembox flexcolumn xiaobai ershil"  :class="ite.sale_status==2?'bgqian':ite.sale_status==1?'':'bghui'"
									v-for="(ite,index) in item.cgcgb" :key="index">
									<!-- 1=待使用,2=已使用,3=已过期,4=已退费,5=已取消 -->
									<view class="flexcolumn" v-if="ite.cgcgbData && ite.cgcgbData.status==2">
										<view>{{ite.cgcgbData.username}}</view>
										<view>{{ite.cgcgbData.usermobile}}</view>
									</view>
									<view class="" v-else>
										<view v-if="ite.sale_status==2 && ite.cgordercgbdata">{{ite.cgordercgbdata.user.nickname}}</view>
										<view v-if="ite.sale_status==2 && ite.cgordercgbdata">{{ite.cgordercgbdata.user.mobile}}</view>
										<view v-if="ite.sale_status==2 && ite.cgordercgbdata">{{returnstatus(ite.cgordercgbdata.status)}}</view>
										<view v-if="ite.sale_status==1">￥{{ite.cgcgbData.price}}</view>
										</view>
									</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flexleft margin_top4">
					<!-- <view class="margin_right2 flexcolumn">
						<view class="yixlbtn"></view>
						<view class="margin_top1 strongtext xiaohei nofonweight">我的选择</view>
					</view> -->
					<view class="margin_right2 flexcolumn">
						<view class="wexzlbtn"></view>
						<view class="margin_top1 strongtext xiaohei nofonweight">未预定</view>
					</view>
					<view class="margin_right2 flexcolumn">
						<view class="qianbtn"></view>
						<view class="margin_top1 strongtext xiaohei nofonweight">已预订</view>
					</view>
					<view class="margin_right2 flexcolumn">
						<view class="wucc"></view>
						<view class="margin_top1 strongtext xiaohei nofonweight">无场次</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				user_zbfapply_user_zbfapply_listid: "",
				coupon_id: "",
				yhqShow: false,
				coupon_name: "",
				cg_cgb_data: [],
				dateData: [],
				cgcgb: [],
				currentdate: "", //年月日
				allprice: 0,
				flag: true,
				dataAll: {},
				username: "",
				usermobile: "",
				pageShow: false,
				lefttimeData: [],
				cginfo: [],
				isload:false,
			}
		},
		onLoad(options) {
			this.user_zbfapply_listid = options.user_zbfapply_listid
		},
		onShow() {
			this.init()
		},
		methods: {
			// 1=待使用,2=已使用,3=已过期,4=已退费,5=已取消
			returnstatus(val){
				if(val==1) return "待使用"
				if(val==2) return "已使用"
				if(val==3) return "已过期"
				if(val==4) return "已退费"
				if(val==5) return "已取消"
			},
			changeMonth(type) {
				if (type == 'pre') {
					// if (this.y == new Date().getFullYear() && this.m == new Date().getMonth() + 1) {
					// 	return false
					// }
					if (this.m + 1 == 2) {
						this.m = 12;
						this.y = this.y - 1;
					} else {
						this.m = this.m - 1;
					}
				} else {
					if (this.m + 1 == 13) {
						this.m = 1;
						this.y = this.y + 1;
					} else {
						this.m = this.m + 1;
					}
				}
				this.init(true)
			},
			formatNum(num) {
				let res = Number(num);
				return res < 10 ? '0' + res : res;
			},
			selectrole(item) {
				this.coupon_id = item.id
				this.coupon_name = item.name
				this.init()
			},
			changeday(item) { //选择日期
				console.log(item, "999999");
				this.currentdate = item.date
				this.init()
			},
			returnmouth(val) {
				if (val == 1) return "周一"
				if (val == 2) return "周二"
				if (val == 3) return "周三"
				if (val == 4) return "周四"
				if (val == 5) return "周五"
				if (val == 6) return "周六"
				if (val == 0) return "周日"
			},
			init(flag) {
				let _this = this;
				let data = {
					user_zbfapply_id: this.user_zbfapply_listid,
					date: this.y + "-" + this.m,
					date_day: this.currentdate
				}
				let url = '/api/cgcl/cgOrderCgbIndex'
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request(url, 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.dateData = res.data.dateData
						this.lefttimeData = res.data.showTimeData
						res.data.ssinfo.forEach(item=>{
							item.cgcgb.forEach(ite=>{
								this.$set(ite,"ischeck",false)
							})
						})
						this.cginfo = res.data.ssinfo
						this.dataAll = res.data
						if(!this.isload || flag){
							this.currentdate = res.data.dateData[0].date
							this.isload = true
							this.init()
						}
						this.pageShow = true
					}
				})
			},
			
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.margin_top6{
		margin-top: 60rpx !important; 
	}
	.bghui{
		background-color: #cdcdcd !important;
	}
	.bgqian{
		background-color: #76cb9d !important;
	}
	.bglan{
		background-color: #0075ff !important;
	}
	.itembox {
		width: 200rpx;
		height: 100rpx;
		// width: 120rpx;
		// height: 70rpx;
		margin-top: 2rpx;
		margin-right: 2rpx;
		background-color: #1BA95B;
	}

	.itemleftbox {
		width: 100rpx;
		height: 100rpx;
		margin-top: 2rpx;
		text-align: center;
	}

	.toumd {
		opacity: 0.5;
	}

	.xiahuaxian1 {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.nerbox {
		padding: 38rpx 31rpx;
	}

	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}

	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.lvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		margin: 30rpx 30rpx 0 0;
		background-color: #1ba95d;
	}

	.xiaolvbox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #effff6;
		font-size: 26rpx;
	}

	.huibox {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		color: #999;
		margin: 30rpx 30rpx 0 0;
		background-color: #f7f7f7;
		font-size: 26rpx;
	}

	.shijbox {
		padding: 12rpx 20rpx;
		background: #1BA95B;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.chanbox {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #1BA95B;
		// width: 260rpx;
	}

	.yixlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background: #0075ff;
		width: 40rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.wexzlbtn {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 40rpx;
		background: #1BA95B;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.qianbtn{
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 40rpx;
		background: #76cb9d ;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.wucc{
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 40rpx;
		background: #cdcdcd ;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
	.huibtn {
		padding: 10rpx 20rpx;
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		width: 40rpx;
		color: #cdcdcd;
		background: #cdcdcd;
	}

	.weixzx {
		padding-bottom: 10rpx;
		// border-bottom: 6rpx solid #F5F5F5;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.zitixhx {
		padding-bottom: 10rpx;
		border-bottom: 6rpx solid #1BA95B;
		// background: #1BA95B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	page {
		background-color: #F9F9F9;
	}
</style>